import { CheckOutlined, SearchOutlined } from "@ant-design/icons";
import { Collapse, CollapseProps, Input } from "antd";
import { goToLinkMsg } from "./actions/GoToLink";
import { showMessageMsg } from "./actions/ShowMessage";
import { customJSMsg } from "./actions/CustomJS";
import { useState } from "react";
import { debounce } from "lodash-es";
import { componentMethodMsg } from "./actions/ComponentMethod";
import { sendRequestMsg } from "./actions/SendRequest";
import { closeDialogMsg } from "./actions/CloseDialog";
export function ActionAside(props: { value: string; onChange: (val: string) => void }) {
  const {value,onChange} = props;
  const [filterValue, setFilterValue] = useState("");
  const handleFilter = debounce((e: any) => {
    setFilterValue(e.target.value)
  },300)

  const actionsConfig = [
    {
      key: "page",
      label: "页面",
      children: [goToLinkMsg],
    },
    {
      key: "model",
      label: "弹窗",
      children: [closeDialogMsg, showMessageMsg],
    },
    {
      key: "service",
      label: "服务",
      children: [sendRequestMsg],
    },
    {
      key: "component",
      label: "组件",
      children: [componentMethodMsg],
    },
    {
      key: "other",
      label: "其他",
      children: [customJSMsg],
    },
  ];
  const filteredActionsConfig = actionsConfig.filter(item => {
    return item.children.some(cItem=>{
      return cItem.label.includes(filterValue);
    })
  }).map(item=>{
    return {
      ...item,
      children:item.children.filter(cItem=>{
        return cItem.label.includes(filterValue);
      })
    }
  })
  const menuItems: CollapseProps["items"] = filteredActionsConfig.map(item => {
    return {
      key: item.key,
      label: item.label,
      children: (
        <div>
          {item.children.map(cItem => {
            return (
              <div className="px-6 h-7 hover:bg-gray-100" key={cItem.type}>
                <div className="h-full flex items-center gap-x-3" onClick={()=>onChange(cItem.type)}>
                  <span className={`inline-flex items-center flex-1 w-4 h-full cursor-pointer text-xs pl-1 duration-200
                    ${value===cItem.type?"bg-blue-50":""}`}>{cItem.label}</span>
                  <span className="w-3">
                    {value === cItem.type && <CheckOutlined className="text-blue-500" style={{fontSize: 12}}/>}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      ),
    };
  });
  return (
    <aside className="flex flex-col w-48 border-r-[1px]">
      <div className="p-3 border-b">
        <Input placeholder="请搜索执行动作" onChange={handleFilter} suffix={<SearchOutlined />} />
      </div>
      <div className="flex-1 h-24 overflow-y-auto">
        <Collapse
          defaultActiveKey={actionsConfig.map(mItem => mItem.key as string)}
          ghost
          items={menuItems}
          expandIconPosition="end"
          className="classic hoverStyle"
        />
      </div>
    </aside>
  );
}
